<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义单选按钮样式</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: #fff;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem;
      }

      .container {
        max-width: 800px;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 2.5rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }

      h1 {
        text-align: center;
        margin-bottom: 1.5rem;
        font-size: 2.5rem;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }

      .description {
        text-align: center;
        margin-bottom: 2.5rem;
        font-size: 1.1rem;
        line-height: 1.6;
        opacity: 0.9;
      }

      .examples {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
      }

      .example-card {
        background-color: rgba(255, 255, 255, 0.15);
        border-radius: 15px;
        padding: 1.5rem;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease;
      }

      .example-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
      }

      h2 {
        margin-bottom: 1.2rem;
        font-size: 1.5rem;
        border-bottom: 2px solid rgba(255, 255, 255, 0.3);
        padding-bottom: 0.5rem;
      }

      .radio-group {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      /* 基础隐藏原生单选按钮 */
      .custom-radio {
        position: absolute;
        opacity: 0;
      }

      .radio-label {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 1.1rem;
        transition: color 0.3s ease;
      }

      /* 样式一：圆形单选按钮 */
      .style1 .custom-radio + .radio-indicator {
        display: inline-block;
        width: 22px;
        height: 22px;
        border: 2px solid #fff;
        border-radius: 50%;
        margin-right: 12px;
        position: relative;
        transition: all 0.3s ease;
      }

      .style1 .custom-radio:checked + .radio-indicator {
        border-color: #4cd964;
        background-color: rgba(76, 217, 100, 0.2);
      }

      .style1 .custom-radio:checked + .radio-indicator::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 12px;
        height: 12px;
        background-color: #4cd964;
        border-radius: 50%;
      }

      .style1 .custom-radio:focus + .radio-indicator {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
      }

      /* 样式二：方形单选按钮 */
      .style2 .custom-radio + .radio-indicator {
        display: inline-block;
        width: 22px;
        height: 22px;
        border: 2px solid #fff;
        border-radius: 4px;
        margin-right: 12px;
        position: relative;
        transition: all 0.3s ease;
      }

      .style2 .custom-radio:checked + .radio-indicator {
        border-color: #ff9500;
        background-color: rgba(255, 149, 0, 0.2);
      }

      .style2 .custom-radio:checked + .radio-indicator::after {
        content: "✓";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #ff9500;
        font-weight: bold;
        font-size: 14px;
      }

      .style2 .custom-radio:focus + .radio-indicator {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
      }

      /* 样式三：填充式单选按钮 */
      .style3 .custom-radio + .radio-indicator {
        display: inline-block;
        width: 22px;
        height: 22px;
        border: 2px solid #fff;
        border-radius: 50%;
        margin-right: 12px;
        position: relative;
        transition: all 0.3s ease;
      }

      .style3 .custom-radio:checked + .radio-indicator {
        border-color: #ff3b30;
        background-color: #ff3b30;
      }

      .style3 .custom-radio:checked + .radio-indicator::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        background-color: #fff;
        border-radius: 50%;
      }

      .style3 .custom-radio:focus + .radio-indicator {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
      }

      /* 样式四：动画效果单选按钮 */
      .style4 .custom-radio + .radio-indicator {
        display: inline-block;
        width: 22px;
        height: 22px;
        border: 2px solid #fff;
        border-radius: 50%;
        margin-right: 12px;
        position: relative;
        transition: all 0.3s ease;
      }

      .style4 .custom-radio:checked + .radio-indicator {
        border-color: #5ac8fa;
        animation: pulse 0.5s ease;
      }

      .style4 .custom-radio:checked + .radio-indicator::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 12px;
        height: 12px;
        background-color: #5ac8fa;
        border-radius: 50%;
      }

      @keyframes pulse {
        0% {
          box-shadow: 0 0 0 0 rgba(90, 200, 250, 0.7);
        }
        70% {
          box-shadow: 0 0 0 10px rgba(90, 200, 250, 0);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(90, 200, 250, 0);
        }
      }

      .style4 .custom-radio:focus + .radio-indicator {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
      }

      .footer {
        margin-top: 2.5rem;
        text-align: center;
        font-size: 0.9rem;
        opacity: 0.8;
      }

      @media (max-width: 600px) {
        .container {
          padding: 1.5rem;
        }

        h1 {
          font-size: 2rem;
        }

        .examples {
          grid-template-columns: 1fr;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>自定义单选按钮样式</h1>
      <p class="description">
        通过CSS伪元素和过渡效果，我们可以创建美观且交互性强的自定义单选按钮。
      </p>

      <div class="examples">
        <div class="example-card style1">
          <h2>样式一：圆形指示器</h2>
          <div class="radio-group">
            <label class="radio-label">
              <input type="radio" name="style1" class="custom-radio" checked />
              <span class="radio-indicator"></span>
              选项一
            </label>
            <label class="radio-label">
              <input type="radio" name="style1" class="custom-radio" />
              <span class="radio-indicator"></span>
              选项二
            </label>
            <label class="radio-label">
              <input type="radio" name="style1" class="custom-radio" />
              <span class="radio-indicator"></span>
              选项三
            </label>
          </div>
        </div>

        <div class="example-card style2">
          <h2>样式二：方形带勾选</h2>
          <div class="radio-group">
            <label class="radio-label">
              <input type="radio" name="style2" class="custom-radio" checked />
              <span class="radio-indicator"></span>
              选项一
            </label>
            <label class="radio-label">
              <input type="radio" name="style2" class="custom-radio" />
              <span class="radio-indicator"></span>
              选项二
            </label>
            <label class="radio-label">
              <input type="radio" name="style2" class="custom-radio" />
              <span class="radio-indicator"></span>
              选项三
            </label>
          </div>
        </div>

        <div class="example-card style3">
          <h2>样式三：填充式</h2>
          <div class="radio-group">
            <label class="radio-label">
              <input type="radio" name="style3" class="custom-radio" checked />
              <span class="radio-indicator"></span>
              选项一
            </label>
            <label class="radio-label">
              <input type="radio" name="style3" class="custom-radio" />
              <span class="radio-indicator"></span>
              选项二
            </label>
            <label class="radio-label">
              <input type="radio" name="style3" class="custom-radio" />
              <span class="radio-indicator"></span>
              选项三
            </label>
          </div>
        </div>

        <div class="example-card style4">
          <h2>样式四：动画效果</h2>
          <div class="radio-group">
            <label class="radio-label">
              <input type="radio" name="style4" class="custom-radio" checked />
              <span class="radio-indicator"></span>
              选项一
            </label>
            <label class="radio-label">
              <input type="radio" name="style4" class="custom-radio" />
              <span class="radio-indicator"></span>
              选项二
            </label>
            <label class="radio-label">
              <input type="radio" name="style4" class="custom-radio" />
              <span class="radio-indicator"></span>
              选项三
            </label>
          </div>
        </div>
      </div>

      <div class="footer">
        <p>提示：点击不同样式的单选按钮查看效果，所有样式均使用纯CSS实现</p>
      </div>
    </div>

    <script>
      // 添加简单的交互效果
      document.querySelectorAll(".custom-radio").forEach((radio) => {
        radio.addEventListener("change", function () {
          // 这里可以添加自定义逻辑
          console.log(`选中了: ${this.parentElement.textContent.trim()}`);
        });
      });
    </script>
  </body>
</html>
